<template>
  <AfastIcon
    :name="icon"
    @mouseover="onMouse(true)"
    @mouseleave="onMouse(false)"
    class="close"
    @click="onClick"
    :is-hover="isHover"
    :size="size"
  />
</template>
<script setup lang="ts">
import { ref } from "vue";
import AfastIcon from "./AfastIcon.vue";
const emits = defineEmits(["click"]);
withDefaults(defineProps<{
  icon: string,
  size?: number;
}>(),{
  icon:'cancelwhite'
});
const isHover = ref(false);

const onClick = () => {
  emits("click");
};

const onMouse = (over: boolean) => {
  isHover.value = over;
};
</script>
<style lang="scss">
.close {
  cursor: pointer;
  position: absolute;
  right: 10px;
  height: 20px;
  width: 20px;
  transition: 0.2s;
}
</style>
